<template>
  <el-container>
    <!--左侧菜单栏-->
    <el-aside width="250px">
      <el-col :span="27">
        <el-menu
            active-text-color="#FFFFFF"
            background-color="#409EFF"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#FFFFFF"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
            style="border-right: solid 0px"
            :router="true"
        >
          <div>中小学信息管理系统</div>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><House /></el-icon>
              <span>主页</span>
            </template>
            <el-menu-item index="1-1">学生统计</el-menu-item>
            <el-menu-item index="1-2">教师统计</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon><School /></el-icon>
              <span>学校管理</span>
            </template>
            <el-menu-item index="1-1">学校信息</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>学生管理</span>
            </template>
            <el-menu-item index="1-1">学生信息</el-menu-item>
            <el-menu-item index="1-2">学生成绩</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><Collection /></el-icon>
              <span>课程管理</span>
            </template>
            <el-menu-item index="1-1">课程信息</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>班级管理</span>
            </template>
            <el-menu-item index="1-1">班级信息</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/dashboard/user">用户管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="7">
            <template #title>
              <el-icon><ChatDotRound /></el-icon>
              <span>校园公告</span>
            </template>
            <el-menu-item index="1-1">公告信息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-aside>

    <el-container class="rightContent">
      <!--头部-->
      <el-header>
        <el-dropdown>
        <span class="el-dropdown-link">
          {{user.name}}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!--主体-->
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    </el-container>
</template>

<script>
import {doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip, removeToken} from "../utils/util.js";

export default {
  name: "DashboardView",
  data(){
    return {
      user: {},
    }
  },

  mounted() {
    this.loadLoginUser();
  },

  methods: {
    // 加载当前登录用户
    loadLoginUser(){
      doGet('/api/user/info', {}).then((resp)=>{
        if (resp.data.code===200){
          this.user=resp.data.data;
        }
      })
    },

    // 用户退出登录
    logout(){
      doGet('/api/user/logout',{}).then((resp)=>{
        if (resp.data.code===200){
          // 删除token
          removeToken();
          // 消息提示
          messageTip('退出成功','success')
          // 页面跳转
          window.location.href='/';
        }else{
          messageConfirm('退出失败，是否需要强制退出').then(resp=>{
            removeToken();
            window.location.href="/";
          }).catch(()=>{
            messageTip("取消强制退出","warning")
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.el-header {
  height: 50px;
  background-color: rgb(102.2, 177.4, 255);
}
.rightContent {
  height: calc(100vh);
}
div {
  height: 50px;
  text-align: center;
  color: white;
  line-height: 50px;
  font-size: 19px;
}
.el-dropdown-link {
  font-size: 15px;
  color: white;

}
.el-dropdown {
  float: right;
}
.el-aside{
  background-color: #409EFF;
}
</style>